<script setup>
import { reactive, ref } from 'vue';

let isActive = ref(true)
let isLine = ref(true)

let myClass = reactive(
    {
       active:isActive, 
       line:isLine 
    }
)
</script>

<template>
    <div class="active line">Hello, World!</div>
    <!-- 动态赋值一个对象，实现动态绑定 class -->
    <div v-bind:class="{active:true, line:true}">Hello, World!</div>
    <!-- 利用一个响应式布尔变量作为开关 -->
    <div v-bind:class="{active:isActive, line:isLine}">Hello, World!</div>
    <!-- 通过数据对象进行赋值 -->
    <div v-bind:class="myClass">Hello, World!</div>
</template>

<style scoped>
 .active {
    color: red;
  }

  .line {
    text-decoration: underline
  }
</style>

